<html> <head>
<title>A Processing.js Example</title>
<script type="text/javascript" src="../../../processing.js"></script>
<script type="text/javascript" src="../../init.js"></script>

</head>
<body>
<table width="640">
<tr>
	<td>
	<h1 style="background: lightgreen;">A Processing.js bezierTangent() Example</h1>
	
	<script type="application/processing">
	size(300,300);
	background(50);
	PFont font;
	font=loadFont("Arial");
	textFont(font,18);
	noFill();
	int steps = 6;
	fill(0);
	int j=20;
	for (int i = 0; i <= steps; i++) {
	  float t = i / float(steps);
	  // Get the location of the point
	  float x = bezierTangent(85, 10, 90, 15, t);
	  text(x.toString(), 0,j);
	  j+=20;
	  float y = bezierTangent(20, 10, 90, 80, t);
	  text(y.toString(), 0,j);
	  j+=20;
	}

	</script>
	<canvas width="200" height="200" ></canvas>
	</td>
</tr>
<tr>
	<td>
	<textarea  rows="80" cols="100">
	size(300,300);
	background(50);
	PFont font;
	font=loadFont("Arial");
	textFont(font,18);
	noFill();
	int steps = 6;
	fill(0);
	int j=20;
	for (int i = 0; i <= steps; i++) {
	  float t = i / float(steps);
	  // Get the location of the point
	  float x = bezierTangent(85, 10, 90, 15, t);
	  text(x.toString(), 0,j);
	  j+=20;
	  float y = bezierTangent(20, 10, 90, 80, t);
	  text(y.toString(), 0,j);
	  j+=20;
	}
	</textarea>
</body> </html>
